<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="港杂费结算信息" name="1">
				<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="船名航次" prop="shipvoyageName" class="top">
								<el-input v-model="formData.shipvoyageName" size="mini" placeholder="请输入船名" disabled />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<BaseTable
									:data="formData.portData"
									:columns="tableColumn"
									:tableHeight="200"
									:pagination="false"
								></BaseTable>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
			<el-collapse-item title="费用信息" name="2">
				<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="付款单位" prop="payCompanyId" class="top">
								<el-select
									v-model="formData.payCompanyId"
									v-selecttext="formData.payCompanyName,customerData,'customerId','customerName'"
									filterable
									size="mini"
									clearable
									class="others"
                  :disabled="isGet"
								>
									<el-option
										v-for="item in customerData"
										:key="item.customerId"
										:label="item.customerName"
										:value="item.customerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<el-card class="bgcard">合计金额 ： {{ totalAmount }}</el-card>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="" prop="shipperName" class="top">
								<BaseTable
									:data="formData.chargingData"
									:columns="tableColumn1"
									:tableHeight="300"
									:pagination="false"
								></BaseTable>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import api from '@/api/billingSettlementSys/cargoCost/portIncidentals/index'
export default {
  name: 'chargingDetail',
  components: { BaseTable },
  props: {
    // 表单验证规则
    rules: {
      type: Object
    },
    customerData: {
      type: Array,
      default: () => []
    },
    clickRow: {
      type: Object
    },
    isGet: {
      typeof: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: {
        shipvoyageName: '',
        payCompanyId: '',
        portData: [], // 港杂费信息table
        chargingData: [] // 费用信息
      }, // from
      timeRange: [],
      fileList: [],
      tableColumn: [ // 港杂费
        // table表头
        { prop: 'cargoOwnerName', label: '货主' },
        { prop: 'cargoAgentName', label: '货代' },
        { prop: 'cargoName', label: '货名' },
        { prop: 'processName', label: '作业过程' },
        { prop: 'quantity', label: '件数', width: 100 },
        { prop: 'ton', label: '重量', width: 100 },
        { prop: 'volume', label: '体积', width: 100 }
      ],
      tableColumn1: [ // 结算明细
        // table表头
        { prop: 'rateItemName', label: '费目' },
        { prop: 'cargoName', label: '货名' },
        { prop: 'unitName', label: '计量单位' },
        { prop: 'rate', label: '单价', width: 100 },
        { prop: 'quantity', label: '数量', width: 100 },
        { prop: 'amount', label: '金额', width: 100, isMoney: true },
        { prop: 'tax', label: '税率', width: 100 },
        { prop: 'taxAmount', label: '税额', width: 100, isMoney: true }
      ],
      totalAmount: 0 // 总计金额
    }
  },
  watch: {
    'formData.payCompanyId': {
      handler(val) {
        this.totalAmount = 0
        const params = {
          id: this.clickRow.id,
          companyId: this.clickRow.companyId,
          cargoInfoId: this.clickRow.cargoInfoId,
          berthTime: this.clickRow.berthTime,
          payCompanyId: val,
          cargoCode: this.clickRow.cargoCode,
          tradeType: this.clickRow.tradeType
        }
        api.reqGetStopRecord(params).then(res => {
          this.formData.chargingData = res.data.data.costList
          this.totalAmount = res.data.data.totalAmount
        }).catch(() => { this.formData.chargingData = [] })
      },
      deep: true
      // immediate: true
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 160
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
[v-cloak] {
	display: none;
}
</style>
